<template>
  <div class="table-pagination">
    <el-pagination
      background
      @change="onPaginationChange"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :layout="layout"
      :page-sizes="[10, 20, 50, 100]"
      :hide-on-single-page="hideOnSinglePage"
      :page-count="pagination.totalPage"
      :total="pagination.total"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  pagination: {
    type: Object,
    default: () => {
      return {
        pageNo: 1,
        pageSize: 20,
        total: 0,
        totalPage: 0,
      }
    },
  },
  hideOnSinglePage: {
    type: Boolean,
    default: true,
  },
  layout: {
    type: String,
    default: 'total, prev, pager, next, jumper, sizes ',
  },
})
const currentPage = ref(1)
const pageSize = ref(20)
const emits = defineEmits(['change'])
const onPaginationChange = (page: number, size: number) => {
  emits('change', page, size)
}

watch(
  () => props.pagination,
  () => {
    currentPage.value = props.pagination.pageNo
    pageSize.value = props.pagination.pageSize
  },
  {
    deep: true,
  }
)
</script>
<style scoped lang="scss"></style>
